<template>
  <el-container class="app-container">
    <el-aside width="200px">
      <el-menu
        :router="true"
        :default-active="activeRoute"
        class="app-menu"
        background-color="#304156"
        text-color="#fff"
        active-text-color="#409EFF"
      >
        <el-menu-item 
          v-for="route in routes" 
          :key="route.path"
          :index="route.path"
        >
          <el-icon><component :is="route.meta?.icon" /></el-icon>
          <span>{{ route.meta?.title }}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Folder, Download, HomeFilled, List } from '@element-plus/icons-vue'

export default defineComponent({
  name: 'App',
  components: {
    Folder,
    Download,
    HomeFilled,
    List
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    
    const routes = computed(() => 
      router.options.routes.filter(route => route.path !== '/')
    )
    
    const activeRoute = computed(() => route.path)

    return {
      routes,
      activeRoute
    }
  }
})
</script>

<style>
.app-container {
  height: 100vh;
}

.app-menu {
  height: 100%;
}

.el-aside {
  background-color: #304156;
}

.el-menu {
  border-right: none;
}

.el-main {
  padding: 20px;
  background-color: #f0f2f5;
}
</style>
